<template>
  <div>
    <div>
      <el-form 
        v-if="Show" 
        :inline="true">
        <el-form-item label="卷号">
          <coilNextPreCal 
            ref="coilNextPre" 
            :mat-no="matNo" 
            @search="CoilSeach"/>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-radio-group 
        v-model="radio" 
        @change="radioData">
        <el-radio :label="'ys'">屈服</el-radio>
        <el-radio :label="'ts'">抗拉</el-radio>
        <el-radio :label="'el'">延伸</el-radio>
      </el-radio-group>
      <div 
        id="heat" 
        :style="{width: '100%', height: 'calc(100vh - 220px)'}"/>
    </div>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch'
import coilNextPreCal from '@/components/coilNextPrePltcm'
import themeEcharts from '@/assets/css/themeEcharts'
import { post } from '@/lib/Util'
import _ from 'lodash'

export default {
  name: 'IndHide',
  components: {
    BaseSearch,
    coilNextPreCal
  },
  props: {
    /* sootList: {
      type: Object,
      default: null
    },*/
    info_mat_no: {
      type: String,
      default: ''
    },
    Show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      matNo: '',
      sootListdata: {},
      radio: 'ys',
      Axis: [],
      isEcarts: false,
      length: '',
      width: ''
    }
  },
  watch: {
    info_mat_no: {
      handler(title) {
        this.matNo = this.info_mat_no
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    /* if (this.isEcarts) {
      const dcharts = this.$echarts.getInstanceByDom(document.getElementById('heat'))
      if (dcharts) {
        this.$echarts.dispose(dcharts)
      }
    }*/
  },
  mounted() {
    // localStorage.setItem('sootListdata', JSON.stringify(this.sootListdata))// 保存数据
    // localStorage.getItem('sootListdata')// 读取数据
    // console.log(JSON.parse(localStorage.getItem('sootListdata')))
  },
  methods: {
    // 查询工艺分布数据
    async findMppMap(info_mat_no) {
      console.log('运行2')
      if (info_mat_no === '') {
        info_mat_no = this.$refs.coilNextPre.getMatNo()
      }
      this.length = 200
      this.width = 20
      this.$emit('resData', this.length, this.width, info_mat_no)
      const mockData = await post(this.urlApi.mppCalforceAnalysisGraph, {
        info_mat_no: info_mat_no
      })
      console.log(mockData, info_mat_no, 'mockData')
      const serData = []
      const sootList = {}
      const xData = []
      for (var i = 0; i < 1; i++) {
        xData.push(i)
      }
      mockData.wPosition = xData
      if (this.radio === 'ys') {
        mockData.lPosition = mockData.ys.xData
        mockData.ys.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item])
          })
        })
      } else if (this.radio === 'ts') {
        mockData.lPosition = mockData.ts.xData
        mockData.ts.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item])
          })
        })
      } else if (this.radio === 'el') {
        mockData.lPosition = mockData.el.xData
        mockData.el.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item])
          })
        })
      }

      sootList.xAxis = mockData.wPosition
      sootList.yAxis = mockData.lPosition
      sootList.seriesData = serData
      this.sootListdata = sootList
      this.$nextTick(() => {
        this.heat()
      })
    },
    // 屈服抗拉选项
    radioData() {
      console.log('radio选项', this.radio, this.matNo)
      this.findMppMap(this.matNo, this.radio)
    },
    CoilSeach(matNo) {
      this.$emit('queryBtn', matNo)
      this.matNo = matNo
      // this.findMppMap(this.info_mat_no, this.radio)
    },
    search() {
      // 搜索条件改变时
      const info_mat_no = this.$refs.coilNextPre.getMatNo()
      this.matNo = info_mat_no
      this.findMppMap(this.matNo)
    },
    // 所属业务
    heat() {
      console.log('云图数据渲染')
      if (this.sootListdata.seriesData === undefined) {
        return false
      }
      this.isEcarts = true
      let Chart = this.$echarts.getInstanceByDom(
        document.getElementById('heat')
      )
      if (!Chart) {
        Chart = this.$echarts.init(
          document.getElementById('heat'),
          themeEcharts
        )
        this.$once('hook:beforeDestroy', () => {
          this.$echarts.dispose(Chart)
        })
        Chart.on('click', params => {
          console.log('云图点击1')
          const wData = this.sootListdata.xAxis[params.value[0]]
          const lData = this.sootListdata.yAxis[params.value[1]]
          this.$emit('PointResults', [wData, lData]) // 页面刷新this.findPointData()
          Chart.setOption({
            series: [
              {
                markLine: {
                  symbol: 'none',
                  label: {
                    show: false
                  },
                  lineStyle: {
                    width: 3,
                    type: 'solid',
                    color: 'black'
                  },
                  data: [
                    {
                      name: '某个坐标',
                      yAxis: params.value[1],
                      value: '标记1'
                    }
                    /* {
                      name: '某个坐标',
                      xAxis: params.value[0],
                      value: '标记1'
                    }*/
                  ]
                }
              }
            ]
          })
        })
      }
      if (this.sootListdata.seriesData.length === 0) {
        Chart.setOption({
          animation: false,
          grid: {
            left: 0,
            right: 30,
            top: 20,
            bottom: 50,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: { show: false },
            data: [],
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: []
          },
          series: [
            {
              name: 'Punch Card',
              type: 'heatmap',
              data: []
            }
          ],
          visualMap: {
            min: '',
            max: '',
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '0%',
            realtime: false,
            inRange: {
              color: [
                '#0071ff',
                '#00ffc4',
                '#aaff00',
                '#ffe400',
                '#ff7200',
                '#ff4400'
              ]
            }
          }
        })
      } else {
        const minMax = _.sortBy(
          JSON.parse(JSON.stringify(this.sootListdata.seriesData)),
          [2]
        )
        const min = minMax[0][2]
        const max = minMax[minMax.length - 1][2]
        // const xIndex = parseInt(this.sootListdata.xAxis.length / 4)
        const yIndex = 200
        // const xData = this.sootListdata.xAxis[xIndex]
        // const yData = this.sootListdata.yAxis[yIndex]

        var radioMppLabel = {
          ys: '屈服',
          ts: '抗拉',
          el: '延伸'
        }
        var vm = this
        Chart.setOption({
          tooltip: {
            position: 'top',
            formatter: function(params) {
              if (params.componentSubType === 'heatmap') {
                let valData = params.value
                if (typeof valData === 'string') {
                  valData = params.value.split('，')
                }
                var relVal =
                  '长度方向：' +
                  vm.sootListdata.yAxis[valData[1]] +
                  '<br/>' +
                  radioMppLabel[vm.radio] +
                  '：' +
                  valData[2].toFixed(2)
                return relVal
              }
            }
          },
          animation: false,
          grid: {
            left: 0,
            right: 30,
            top: 20,
            bottom: 50,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: { show: false },
            data: this.sootListdata.xAxis,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: this.sootListdata.yAxis
          },
          visualMap: {
            min: min,
            max: max,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '0%',
            realtime: false,
            inRange: {
              color: [
                '#0071ff',
                '#00ffc4',
                '#aaff00',
                '#ffe400',
                '#ff7200',
                '#ff4400'
              ]
            }
          },
          series: [
            {
              name: 'Punch Card',
              type: 'heatmap',
              data: this.sootListdata.seriesData,
              emphasis: {
                itemStyle: {
                  borderColor: '#333',
                  borderWidth: 1
                }
              },
              /* markPoint: {
                symbolSize: 70,
                data: [
                  {
                    name: '当前位置',
                    yAxis: yIndex,
                    xAxis: xIndex,
                    value: [yData, xData],
                    label: {
                      show: true,
                      formatter: '{c}'
                    }
                  }
                ]
              },*/
              markLine: {
                symbol: 'none',
                lineStyle: {
                  width: 3,
                  type: 'solid',
                  color: 'black'
                },
                position: 'middle',
                data: [
                  {
                    name: '某个坐标',
                    yAxis: yIndex,
                    value: '标记1'
                  }
                  /* {
                    name: '某个坐标',
                    xAxis: xIndex,
                    value: '标记1'
                  }*/
                ]
              },
              progressive: 1000,
              animation: false
            }
          ]
        })
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-radio {
  margin-right: 7px;
}

/deep/ .el-input-group__append {
  padding: 0px;
}

/deep/ .el-input-group__prepend {
  padding: 0px;
}
</style>
<style>
.xw_inputPreNext .xw_divBtn {
  width: 21px;
}
</style>
